<div>
  @if (edit) {
    <input
      [id]="position"
      #inputElement
      class="po-grid-cell-input"
      [(ngModel)]="editValue"
      (keydown.arrowup)="$event.stopPropagation()"
      (keydown.arrowdown)="$event.stopPropagation()"
      (keydown.arrowleft)="$event.stopPropagation()"
      (keydown.arrowright)="$event.stopPropagation()"
      (keydown)="onKeyDownInput($event)"
      (blur)="onBlurInput()"
    />
  } @else {
    <div
      #contentElement
      [id]="position"
      class="po-grid-cell-content po-grid-cell-{{ align }} {{ !value && required ? 'po-grid-cell-required' : '' }}"
      (keydown)="onKeyDownContent($event)"
      tabindex="{{ readonly ? -1 : 0 }}"
      (dblclick)="dblclick($event)"
    >
      <span>{{ value || '&nbsp;' }}</span>
    </div>
  }
</div>
